<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>汽车4S店管理系统登录</title>
  <link rel="icon" href="/images/new-favicon.ico" type="/images/ico">
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/css/style.min.css" rel="stylesheet">
  <link href="/css/validate.css" rel="stylesheet">
  <link href="/css/login.css" rel="stylesheet">
  <!--<style>-->
  <!--  .wrapper .input-box label {-->
  <!--    position: absolute !important;-->
  <!--    top: 50% !important;-->
  <!--    left: 5px !important;-->
  <!--    transform: translateY(-50%) !important;-->
  <!--    font-size: 1em !important;-->
  <!--    color: #fff !important;-->
  <!--    pointer-events: none !important;-->
  <!--    transition: 0.5s !important;-->
  <!--  }-->

  <!--  .wrapper .input-box input:focus ~ label,-->
  <!--  .wrapper .input-box input:valid ~ label {-->
  <!--    top: -5px !important;-->
  <!--  }-->
  <!--</style>-->
  <!--  <style>-->
  <!--    .wrapper .input-box label {-->
  <!--      position: absolute;-->
  <!--      top: 50%;-->
  <!--      left: 5px;-->
  <!--      transform: translateY(-50%);-->
  <!--      font-size: 1em;-->
  <!--      color: #fff;-->
  <!--      pointer-events: none;-->
  <!--      transition: 0.5s;-->
  <!--    }-->

  <!--    .wrapper .input-box input:focus ~ label,-->
  <!--    .wrapper .input-box input:valid ~ label {-->
  <!--      top: -5px;-->
  <!--    }-->
  <!--  </style>-->

</head>

<script>
  function send(i) {
    if (i === 0) {
      $("#userform").attr("action", $("#bt0").attr("uri")).submit();
      return false;
    } else if (i === 1) {
      $("#userform").attr("action", $("#bt1").attr("uri")).submit();
      return false;
    }
  }
</script>


<body style="min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 添加背景图片 */
            /*background: #0b2e13;*/
            background: url('/images/login.png') no-repeat;
            background-size:cover;">

<!--<div class="row no-gutters bg-white vh-100">-->

<!--  <div class="col-md-6 col-lg-7 col-xl-8 d-none d-md-block" style="background-image: url(/images/login-bg-1.jpg); background-size: cover;">-->
<!--    <div class="d-flex vh-100">-->
<!--      <div class="p-5 align-self-end">-->
<!--        <br><br><br>-->
<!--        <p class="text-white">前端基于Bootstrap v4.4.1。</p>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->



<div class="wrapper">
  <!--        <a href="/login"> <img alt="light year admin" src="/images/logo.png"> </a>-->
  <form method="post" id="userform">
    <h1>登录</h1>
    <div class="input-box">
      <i class="fas fa-envelope icon"></i>
      <input type="text" id="username" name="username" onfocus="floatLabel(this)" onblur="unfloatLabel(this)"/>
      <!--          <label>用户名</label>-->
      <label id = "username-label" style="position: absolute !important; top: 50% !important; left: 5px !important; transform: translateY(-50%) !important; color: #fff !important;">用户名</label>
    </div>

    <div class="input-box">
      <i class="fas fa-lock icon"></i>
      <input type="password" id="password" name="password" onfocus="floatLabel(this)" onblur="unfloatLabel(this)"/>
      <label id = "password-label" style="position: absolute !important; top: 50% !important; left: 5px !important; transform: translateY(-50%) !important; color: #fff !important;">密码</label>
    </div>

    <!--        <div class="row">-->
    <!--          <a onclick="forgotman()">Forgot password?</a>-->
    <!--        </div>-->
    <!-- 添加隐藏的user参数 -->
    <input type="hidden" class="form-control" id="user" name="user">

    <button class="btn"  th:attr="uri=@{/emplogin.action}" onclick="send(0)"  id="bt0">员工登录</button>
    <button class="btn"  th:attr="uri=@{/login.action}" onclick="send(1)"  id="bt1">管理员登录</button>
    <!--提示框-->
    <div class="alert alert-danger" role="alert" th:if="${msg!=null}">
      <div th:text="${msg}"></div>
    </div>
  </form>
  <!--      <p class="text-center text-muted mt-3">@ 4S店管家 汽车4S店管理系统</p>-->
  <!--    </div>-->
</div>

<script type="text/javascript" src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="/js/jquery.validate.js" th:src="@{/js/jquery.validate.js}"></script>
<script type="text/javascript" src="/js/messages_zh.js" th:src="@{/js/messages_zh.js}"></script>
<script>
  function send(i)
  {
    if (i===0)
    {
      $("#userform").attr("action", $("#bt0").attr("uri")).submit();
      return false;
    }
    else if(i===1)
    {
      $("#userform").attr("action",$("#bt1").attr("uri")).submit();
      return false;
    }

  }
  $().ready(function() {
    $("#userform").validate(
            {
              rules: {
                username: "required",
                password: "required",

              },
              messages:{
                username:"请输入用户名",
                password: "请输入密码",

              },
              errorElement: "em"
            }
    );
  });

  function floatLabel(input) {
    input.nextElementSibling.style.top = '-5px';
  }

  function unfloatLabel(input) {
    if (input.value === '') {
      input.nextElementSibling.style.top = '50%';
    }
  }
</script>
</body>
</html>